<template>
  <div class="body">
    <header class="header">
      <div class="title">
        <!-- <router-link> -->
        <img @click="toback" src="../../assets/images/01_11.png" alt="" class="img_zuo" />
        <!-- </router-link> -->
        <div>宣传部署</div>
        <!-- <img class="img_big" src="../../assets/images/01_05.png" @click="add" /> -->
      </div>
    </header>
    <div class="contant">
<!--      <div v-show="yinchang">-->
<!--        <div class="stylebox posi">-->
<!--          <div class="rvvee">-->
<!--            <div class="styles" v-for="(v,index) of leibielist" :key="index">-->
<!--              <div class="hdgd" @click="stylefv(index)">-->
<!--                <img class="img_log6" :src="v.gfg" />-->
<!--                <div>{{v.mc}}</div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->

      <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> -->
        <van-list v-model="loading" :finished="finished" @load="onLoad">
<!--          <div class="stylebox">-->
<!--            <div class="rvvee">-->
<!--              <div class="styles" v-for="(v,index) of leibielist" :key="index">-->
<!--                <div class="hdgd" @click="stylefv(v,index)">-->
<!--                  <img class="img_log6" :src="v.gfg" />-->
<!--                  <div>{{v.mc}}</div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="listvr_tit listvr">-->
<!--            <div>已开展工作</div>-->
<!--          </div>-->
          <div @click="todetail(v.id,v.type, v.noweId)" class="xcbs_box" v-for="(v,index) of list" :keys="index">
            <div class="xcbs_child">
              <img v-show="v.type=='风险研判'" class="img_persons" src="../../assets/images/yanpan.png" />
              <img v-show="v.type=='网络安全宣传'" class="img_persons" src="../../assets/images/wangluo.png" />
              <img v-show="v.type=='入户安全宣传'" class="img_persons" src="../../assets/images/ruhu.png" />
              <img v-show="v.type=='现场安全宣传'" class="img_persons" src="../../assets/images/xianchang.png" />
              <img v-show="v.type=='隐患协调'" class="img_persons" src="../../assets/images/xietiao.png" />
              <img v-show="v.type=='警示约谈'" class="img_persons" src="../../assets/images/yuetan.png" />
              <img v-show="v.type=='实战演练'" class="img_persons" src="../../assets/images/yanlian.png" />
              <img v-show="v.type=='桌面推演'" class="img_persons" src="../../assets/images/tuiyan.png" />
              <img v-show="v.type=='安全培训'" class="img_persons" src="../../assets/images/peixun.png" />
              <img v-show="v.type=='安排部署'" class="img_persons" src="../../assets/images/bushu.png" />
              <img v-show="v.type=='信息报送'" class="img_persons" src="../../assets/images/baosong.png" />
               <img v-show="v.type=='报刊宣传'" class="img_persons" src="../../assets/images/baosong.png" />
              <img v-show="!v.id" class="img_persons" src="../../assets/images/peixun.png" />
              <div class="xcbs_suns">
                <div class="xcbs_tit">[{{v.type}}]&nbsp;{{v.title}}</div>
                <div class="xcbs_sun">
                  <img class="img_people" src="../../assets/images/people.png" />
                  <div>{{v.name}}</div>
                </div>
              </div>
            </div>
            <div class="time">{{v.TIME}}</div>
          </div>
        </van-list>
      <!-- </van-pull-refresh> -->
    </div>
  </div>
</template>

<script>
  // import  Tabbar from '../../tabbar'
  export default {
    name: 'inspection',
    data() {
      return {
        userId: null, //用户id
        list: [],
        where: '',
        leibielist: [], //方式
        loading: false, //加载状态结束false
        finished: false, //全部加载完成true
        error: false, //出错状态
        refreshing: false, //是否下拉加载 是true
        cunt: 1,
        yinchang: false,
        scroll: 0,
        total: null,
        src: '',
        // freshHeight:""
        load_over:false
      }
    },
    components: {
      // Tabbar
    },
    beforeRouteLeave(to, from, next) {
        //设置路由的 meta
        if(!(to.path=='/infodetail'||to.path=='/xcbs_detail')){
          localStorage.removeItem("list_scrollTop");
        }
        next();
    },
    //进入该页面时，用之前保存的滚动位置赋值
    beforeRouteEnter (to, from, next) {
        next(vm => {
          var list_scrollTop = localStorage.getItem("list_scrollTop")?JSON.parse(localStorage.getItem("list_scrollTop")):null;
          if(list_scrollTop||list_scrollTop===0){
            $('.contant').animate({scrollTop: list_scrollTop}, 0);
          }else{
            vm.userId = localStorage.getItem("userId") //获取访问id
            vm.getstyle()
            if(vm.load_over){
              vm.list = [];
              vm.onRefresh();
            }
          }
          localStorage.removeItem("list_scrollTop");
        })
    },
    methods: {
      toback() {
        this.$router.back()
      },
      stylefv(v,index) {
        if(v.mc=="信息报送"){
          sessionStorage.setItem("choosestyle", JSON.stringify(this.leibielist[index]))
          this.$router.push("/infobaosong")
        }else{
          sessionStorage.setItem("choosestyle", JSON.stringify(this.leibielist[index]))
          this.$router.push("/xcbs_add")
        }
      },
      todetail(id,type, ids) {
        console.log(id)
        console.log(type)
        var kfc = {
          id: id,
          lujing: "xcbs_list"
        }
        if (id) {
          sessionStorage.setItem("todetail", JSON.stringify(kfc))
          if(type=="信息报送"){
            this.$router.push("/infodetail")
          }else{
            this.$router.push("/xcbs_detail")
          }
        } else {
          localStorage.setItem('hard_detail_from', '/xcbs_list')
          this.$router.push({
            path: '/hard_detail_ordinary',
            query: { id: ids, ids: 11 }
          });
        }
        localStorage.setItem("list_scrollTop",$('.contant').scrollTop());
      },
      getlist() {
        /*try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log(e.message);
        }*/
        this.axios.get(
          `${this.$global_msg.Url.host}/partroInspection/deploymentList?userId=${this.userId}&page=${this.cunt}&num=10`, {
            headers: {
              "Content-Type": "application/json"
            }
          }).then(res => {
          console.log(res)
          // alert(JSON.stringify(res))
          // this.list.concat(res.data.rows.list)
          for (var i of res.data.rows.list) {
            this.list.push(i);
          }
          this.total = res.data.rows.total
          this.cunt += 1
          // 加载状态结束
          this.loading = false;
          this.load_over = true;
          console.log(this.list.length)
           console.log(this.total)
          if (this.total < this.list.length || this.total == this.list.length) {
            this.finished = true;
            console.log("加载完毕")
          }
          try {
            plus.nativeUI.closeWaiting();
          } catch (e) {
            console.log(e.message);
          }
        }).catch(e => terminal._error(e));
      },
      getinfo(){
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log(e.message);
        }
        this.axios.get(
          `${this.$global_msg.Url.host}/Information/selectInformationList?userId=${this.userId}&page=${this.cunt}&num=10`, {
            headers: {
              "Content-Type": "application/json"
            }
          }).then(res => {
          console.log(res)
          try {
            plus.nativeUI.closeWaiting();
          } catch (e) {
            console.log(e.message);
          }
          // alert(JSON.stringify(res))
          // this.list=res.data.rows
          for (var i of res.data.rows) {
            this.list.push(i);
          }
          this.total = res.data.total
          // this.total=16
          this.cunt += 1
          // 加载状态结束
          this.loading = false;
          console.log(this.list.length)
          // if (this.total < this.list.length || this.total == this.list.length) {
          //   this.finished = true;
          //   console.log("加载完毕")
          // }
          console.log(this.total)
          if(this.list.length>=this.total){
            this.finished = true;
            console.log("加载完毕")
          }
          }).catch(e => terminal._error(e));
      },
      getstyle() {
        this.axios.get(`${this.$global_msg.Url.host}/partroInspection/deploymentType`, {
          headers: {
            "Content-Type": "application/json"
          }
        }).then(res => {
          console.log(res)
          if (res.data.code == 200) {
            this.leibielist = res.data.rows
            res.data.rows.forEach((v, index) => {
              if (v.mc == "风险研判") {
                this.leibielist[index].gfg = require("../../assets/images/yanpan.png")
              } else if (v.mc == "安排部署") {
                this.leibielist[index].gfg = require("../../assets/images/bushu.png")
              } else if (v.mc == "安全培训") {
                this.leibielist[index].gfg = require("../../assets/images/peixun.png")
              } else if (v.mc == "桌面推演") {
                this.leibielist[index].gfg = require("../../assets/images/tuiyan.png")
              } else if (v.mc == "实战演练") {
                this.leibielist[index].gfg = require("../../assets/images/yanlian.png")
              } else if (v.mc == "警示约谈") {
                this.leibielist[index].gfg = require("../../assets/images/yuetan.png")
              } else if (v.mc == "隐患协调") {
                this.leibielist[index].gfg = require("../../assets/images/xietiao.png")
              } else if (v.mc == "现场安全宣传") {
                this.leibielist[index].gfg = require("../../assets/images/xianchang.png")
              } else if (v.mc == "入户安全宣传") {
                this.leibielist[index].gfg = require("../../assets/images/ruhu.png")
              } else if (v.mc == "网络安全宣传") {
                this.leibielist[index].gfg = require("../../assets/images/wangluo.png")
              } else if(v.mc == "信息报送"){
                this.leibielist[index].gfg = require("../../assets/images/baosong.png")
              }
            })
          } else {
            this.$toast(res.data.msg)
          }
        }).catch(e => terminal._error(e));
      },
      onLoad() {
        // alert(2222)
        // 异步更新数据
        // if (this.refreshing) {
        //   this.list = [];
        //   this.cunt = 1
        //   this.refreshing = false;
        // }
        // this.getinfo()
        this.getlist()
      },
      onRefresh() {
        console.log("下拉")
        // 清空列表数据
        this.finished = false;
        // this.yc=false
        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading = true;
        this.cunt = 1
        this.onLoad();
      },
      scrollfunc() {
        // this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
        // console.log(this.scroll)
        if (document.body.scrollTop) {
          console.log(document.body.scrollTop)
          if (this.scroll >=document.body.scrollTop) {
            // console.log(true)
            this.yinchang = true
            // $(".tou").addClass("posi")
          } else {
            this.yinchang = false
          }
          this.scroll = document.body.scrollTop;

        } else {
            // console.log(document.documentElement.scrollTop)
          if (this.scroll >=document.documentElement.scrollTop) {
            // console.log(true)
            this.yinchang = true
          } else {
            this.yinchang = false
          }
          this.scroll = document.documentElement.scrollTop
        }
        if (this.scroll == 0) {
          this.yinchang = false
        }
      },
    },
    mounted() {
      var _this = this;

        // document.body.style.backgroundColor = "#FFFFFF";
      document.addEventListener("scroll", this.scrollfunc, true)
      // console.log($(document).height()-$(".header").height())
      // this.freshHeight=$(document).height()-$(".header").height()

      //物理返回
      // window.addEventListener("popstate", function(){
      //   _this.toback();
      // }, false);
    },
    created() {

    }
  }
</script>

<style scoped>
  .body{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
  }
  .contant {
    flex: 1;
    width: 100%;
    overflow-y: scroll;
  }

 .hdgd {
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

 .hdgd div {
    display: inline-block;
  }

 .styles div {
    margin-top: 0.1rem;
  }
  .stylebox {
    background: white;
    /* padding: 0.37037rem; */
    box-sizing: border-box;
    /* border: 1px solid red; */
    overflow-x: auto;
    /* width:110%; */
    height:3.9rem;
  }
  .posi {
     position: fixed;
     top: 1.8519rem;
     left: 0;
     right: 0;
     z-index: 10;
     /* border: 1px solid black; */
   }
 .rvvee {
   width:12rem;
   padding:0.2rem;
   overflow-x: auto;
    /* border: 1px solid black; */
 }
  .styles {
    display: inline-block;
    /* border: 1px solid blue; */
    width:2rem;
    font-size: 0.25rem;
    margin-bottom: 0.2rem;
  }

  .img_log6 {
    width: 0.8rem;
    display: inline-block;
  }

  .img_people {
    width: 0.3rem;
    margin-right: 0.2rem;
    height: 0.3rem;
  }

  .xcbs_suns {
    width: 85%;
    /* border: 1px solid red; */
    margin-left: 0.3rem;
    margin-top: 0.15rem;
  }

  .xcbs_sun {
    display: flex;
    align-items: center;
    font-size: 0.296296rem;
    color: #999;
    margin-top: 0.092592rem;
  }

  .time {
    font-size: 0.35rem;
  }

  .xcbs_tit {
    font-size: 0.35rem;
    width: 100%;
    /* border: 1px solid red; */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .img_persons {
    width: 0.731481rem;
    height: 0.722222rem;
  }

  .xcbs_child {
    /* border: 1px solid blue; */
    width: 85%;
    display: flex;
    align-items: center;
  }

  .listvr {
    margin-top: 0.2rem;
  }

  .xcbs_box {
    display: flex;
    justify-content: space-between;
    height: 1.388888rem;
    border-radius: 0.15rem;
    align-items: center;
    background-color: white;
    padding: 0 0.4rem;
  }

  .listvr_tit {
    border-radius: 0.15rem;
    padding: 0 0.4rem;
    height: 0.8rem;
    background-color: white;
    line-height: 0.8rem;
    border-bottom: 1px solid #DDDDDD;
  }

  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    width: 100%;
    z-index: 20;
    font-size: 0.388888rem;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
  }

  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }

  .img_big {
    width: 0.629629rem;
  }
</style>
